* {padding:0px;margin: 0px;}
div {
  width: 500px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
div img {width:100%;height:100%;}

ul {list-style: none; position: absolute; bottom: 5px; display: flex; justify-content: center; width: 100%;}
li {color:#fff; margin: 0px 5px;border-radius:50%; width: 22px;height: 22px;background: #ccc;line-height: 22px;text-align: center;}
li:hover{background: #c30;font-weight: 500;}
li.active{background: #c30;font-weight: 500;}